<template>
	<view class="bgIndex ">
	
		<view class="padding20 buildingInformation">
		
			<view class="">
				<view class="flex-between margin-top_40rpx">
					<view class=" ">
						任务类目
					</view>
					
						<view class="flex" @click="subTypeFn()">
							<text>{{classify}}</text>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					

				</view>
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.title" placeholder="请填写标题" />
					</view>
				
				
				</view>
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						副标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.vice_title" placeholder="请填写副标题" />
					</view>
				
				
				</view>
				<view class="flex-between margin-top_40rpx">
					<view class=" ">
						语音描述
					</view>
					
						<view class="flex" @click="voiceRecordingFn()">
							<text>{{form.describe_speech?'语音已上传':voiceDescription}}</text>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
				
				
				</view>
				<view class="flex-between margin-top_40rpx" @click="location()">
					<view class=" ">
						地点
					</view>
				
					<view class="flex">
						<text>{{place?place:'请选择活动地点'}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				
				
				</view>
				
				
				<view class="flex-between margin-top_40rpx">
					<view class="">
						你的性别
					</view>
					<radio-group v-model="form.sex" name="apply" >
						<label class="m-right10">
							<radio :checked="form.sex ==0" class="min-radio" value="1" color="#67C23A" />
							<text>性别不限</text>
						</label>
						<label class="m-right10">
							<radio :checked="form.sex ==1" class="min-radio" value="1" color="#67C23A" />
							<text>男</text>
						</label>
						<label>
							<radio :checked="form.sex ==2" class="min-radio" value="2" color="#67C23A" />
							<text>女</text>
						</label>
					</radio-group>
				</view>
				
				<view class="flex-between margin-top_40rpx ">
					<view class="font-weight_bold ">
						接单时间段
					</view>
					<view style="color: rgb(153, 153, 153);" class="flex">
						<picker mode="selector" @change='deliveryTimeFn' :range="deliveryTimeList" :range-key="'text'">
							<view class="flex">
								{{timeDec}} <uni-icons type="right" color="rgb(153, 153, 153)" size="15"></uni-icons>
							</view>
						</picker>
				
					</view>
				
				</view>
				
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						服务价格
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.price" :placeholder="'请填输入价格('+currency_name+')'" />
					</view>
				
				
				</view>
				<view class="margin_20rpx_0">
					<text>注明:采用平台货币形式，出售服务完成方可提现， <text style="color: red;">1</text>块钱等于<text style="color: red;">{{basicConfiguration.recharge_ratio}}</text>{{currency_name}}
					</text>
				</view>
				<view class=" myNmae flex-between margin-top_40rpx">
					<view class="">
						服务时长
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.work_time" placeholder="请输入服务时长(分钟)" />
					</view>

				</view>
				
                
				


			</view>

		</view>
	
		<view class="padding20 margin-top_20rpx" style="background-color: #fff;">
			<view class="personalTags">
				<view>
					<view class="font-weight_bold">
						需求标签
					</view>
					<view class="tag_container">
						<zy-tag ref="zyAddTag" addible closable @delete="deleteTag(item)"
							v-for="(item, index) in tagAddList" :text="item"></zy-tag>
						<view class="zy_tag_add"><text class="zy_tag_add_input" @click="addTag()">+ 自定义</text></view>
					</view>
				</view>
			</view>

		</view>
		<view class="padding20 margin-top_20rpx" style="background-color: #fff;">
			<view class="font-weight_bold">
				描述信息
			</view>
			
			<view class="textarea-box">
				   <piaoyiEditor :values="form.describe" :maxlength="3000" @changes="saveContens" :photoUrl="photoUrl" :api="api" :name="name"/>
			<!-- 	<lRichTextEditor v-model="form.describe" @change="getChange">
				</lRichTextEditor> -->
			<!-- 	<textarea v-model="form.describe" placeholder="请输入自己的个人优势" maxlength="50" @input="descInput"
					style="height: 150rpx;" />
				<view class="textarea-color">{{ remnant }}/50</view> -->
			</view>
			<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
				:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传封面"
				:uploadServerUrl="upPicUrl" ref="selectimgandupload" @uploaded="imgLoaded" @change="imgsChange"
				:maxFileNumber="1"><template v-slot:icon>
					<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
				</template></sunui-upimg1>
				
			<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData1"
				:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传背景详情图"
				:uploadServerUrl="upPicUrl1" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
				:maxFileNumber="5"><template v-slot:icon>
					<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
				</template></sunui-upimg1>
		
		</view>
		
		
		<view class="release flex" @click="releaseFn()">
			立即发布
		</view>
		<view class="" style="height: 20rpx;">
			
		</view>
		<!-- 添加标签 弹出框 -->
		<sunui-popup ref="pop">
			<template v-slot:content>
				
				<view class="v-pop-cls flex-column">
				    <view class="text-align_right " style="width: 90%;" >
				    	
				    	
						<uni-icons  type="closeempty" @click="closeTag()" size="20"></uni-icons>
						
				    </view>
		            <text class="margin-right_50rpx">添加标签</text>
					<input placeholder="请输入2到6个字标签" v-model="singleLabel" />
					<view class="flex add" @click="singleLabelClick()">添加</view>
				</view>
			</template>
		</sunui-popup>
		<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>
		
				<view class="moreActiveButton" style="z-index: 9999;position: relative;">
					<soundRecording @confirm='confirm' @cancel="cancel"></soundRecording>
				</view>
		
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	import zyTag from '@/uni_modules/zy-tag/components/zy-tag/zy-tag.vue'
	export default {
		components: {
			zyTag,
			piaoyiEditor,
			soundRecording
		},
		data() {
			return {
				currency_name:uni.getStorageSync('system').currency_name,
				userInfo: uni.getStorageSync("userInfo"),
				classify: '请选择类目',
				place: '请选择活动地点',
				gender: '请选择搭子性别',
				timeDec: '接单时间段',
				deadline: '请选择结束时间',
				voiceDescription:'点击上传音频',
				serviceDuration:'服务时长',
				api:'',
				name:'file',
				form: {
					// 一级类目
					pid_tab:'',
					// 二级类目
					son_tab:'',
					// 标题
					title:'',
					// 描述
					describe:'',
					// 性别
					sex:'0',
					// 地址
					address:'',
					// 接单时间段
					service_time:'',
					// 语音
					describe_speech:'',
					// 背景图
					content_img:'',
					// 服务时间
					work_time:'',
					// 标签
					label:'',
					// 价格
					price:'',
					// 副标题
					vice_title:'',
					dimension:'',
					longitude:'',
					cover_img:''
					
					
				},
				deliveryTimeList: [{
						text: '4小时',
						value: "4小时"
					},
					{
						text: '8小时',
						value: "8小时"
					},
					{
						text: '12小时',
						value: "12小时"
					},
					{
						text: '24小时',
						value: "24小时"
					}
				],
				imgFormData: null,
				storageMode: "2",
				header: null,
				upPicUrl: null,
				img: [],
				imgStr: [],
				
				imgFormData1: null,
			
			
				upPicUrl1: null,
				img1: [],
				imgStr1: [],
				
				tagAddList:[],
				singleLabel:'',
				remnant:0,
				isEdit:false,
				basicConfiguration:null

			}
		},
		onLoad(options) {
			this.basicConfigurationFn()
             if (options.id) {
             
             
             
             	const decodedData = {};
             	for (const key in options) {
             		// 解码当前字段的值
             		const decodedValue = decodeURIComponent(options[key]);
             
             		// 将解码后的值存储到新的对象中
             		decodedData[key] = decodedValue;
             	}
             
             
                 this.form.id=decodedData.id
             	this.$sun.assignObject(this.form, {
             		...decodedData
             	})
				this.timeDec=this.form.service_time
             	this.init(this.form)
             	this.place = this.form.address
             	console.log(this.form)
             	this.isEdit = true
                this.classify=decodedData.name
             }
             this.api=this.$api.upload
		},
		onShow() {
			 this.basicConfigurationFn()
			this.$at.releaseKey('submit');
			if (uni.getStorageSync("tabClassIfy")) {
				this.classify = JSON.parse(JSON.stringify(uni.getStorageSync("tabClassIfy"))).name
				this.form.pid_tab = uni.getStorageSync("tabClassIfy").pid
				this.form.son_tab = uni.getStorageSync("tabClassIfy").id
			}
		},
		methods: {
			
			cancel(){
				setTimeout(() => {
					this.$refs.modifyEmployeeInfo.close()
				}, 500)
				
			},
			confirm(e) {
				if(e){
					this.$sun.toast('语音上传成功','none')
					this.voiceDescription='语音上传完成'
					this.form.describe_speech = e
					setTimeout(() => {
						this.$refs.modifyEmployeeInfo.close()
					}, 100)
				}else{
					this.$sun.toast('语音上传失败','none')
					
					setTimeout(() => {
						this.$refs.modifyEmployeeInfo.close()
					}, 100)
				}
			},
			
			voiceRecordingFn() {
			
				this.$refs.modifyEmployeeInfo.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 1000
			
				});
				// this.$sun.navGo('/pagesA/personalCenter/voiceRecording')
			
			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {
			
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data
			
				}
			},
			init(options) {
				this.$nextTick(() => {
					
					const cover_imgList = options.cover_img.split(',').map((item) => item.trim());
					console.log(cover_imgList)
					this.$refs.selectimgandupload1.setItems(cover_imgList);
				
					this.$refs.selectimgandupload.setItems([options.content_img]);
					
				})
			   this.tagAddList = this.form.label.split(',')
			
			
			},
			
			releaseFn(){
				console.log(this.form)
				if(this.userInfo.is_authentication==2){
					this.$at.uniDoFunc({
						key: 'submit',
						success: async () => {
							this.$at.lockKey('submit');
							// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
							if (!this.form.title) {
								this.$sun.toast("请填写标题", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.label) {
								this.$sun.toast("请选择标签", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.describe) {
								this.$sun.toast("请填写富文本描述", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.pid_tab && this.form.son_tab) {
								this.$sun.toast("请选择分类类型", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.describe_speech) {
								this.$sun.toast("请填写服务语音", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.service_time) {
								this.$sun.toast("请填写接单时间段", 'none')
								this.$at.releaseKey('submit');
							}else if (!this.form.price) {
								this.$sun.toast("请填写服务价格", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.work_time) {
								this.$sun.toast("请填写服务时间", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.address) {
								this.$sun.toast("请选择活动地点", 'none')
								this.$at.releaseKey('submit');
							} else if (!this.form.content_img) {
								this.$sun.toast("请上传详情图", 'none')
								this.$at.releaseKey('submit');
							}  else {
								console.log(this.form)
					
								const saveOrUpdate = this.isEdit ? this.$api.editService : this.$api.addService;
								const result = await this.$http.post({
									url: saveOrUpdate,
									data: {
										...this.form
					
									},
									headers: {
										'Authorization': this.userInfo.token
									}
					
								})
								if (result.code == 0) {
					
									this.$sun.toast(result.message, 'none')
									uni.removeStorageSync('tabClassIfy')
									setTimeout(()=>{
										this.$sun.navBack()
									},500)
					
					
					
								} else {
									this.$sun.toast(result.message, 'none')
								}
					
								this.$at.releaseKey('submit');
							}
						}
					});
				}else{
					this.$sun,toast('请实名认证之后在发布服务任务','none')
				}
				
			},
			deliveryTimeFn(e) {
				this.form.service_time = this.deliveryTimeList[e.detail.value].value
			
				this.timeDec = this.deliveryTimeList[e.detail.value].text
			},
			location() {
				uni.chooseLocation({
					success: res => {
						this.form.address = res.name;
						this.place = res.name;
						this.form.dimension = res.latitude;
						this.form.longitude =res.longitude  ;
						console.log('获取定位信息res============', res);
					}
				});
			},
			saveContens(e){
				console.log(e)
				this.form.describe=e.html
			},
			// 备注
			descInput(e) {
				this.remnant = e.detail.value.length;
				if (this.remnant >= 50) {
					this.$sun.toast('说明字数已达上限');
				}
			},
			// ‘添加标签’弹出框
			addTag() {
				this.$refs.pop.show({
					anim: 'center',
					shadeClose: false,
					topclose: false
				});
			},
			// 弹窗——添加/修改单个标签
			singleLabelClick() {
				if (!this.singleLabel) {
					this.$sun.toast('请先输入标签');
				} else {
					this.updateTags();
				}
			},
			// 技师员工标签添加修改
			async updateTags() {
				// const result = await this.$http.put({
				// 	url: this.$api.updatePersonalTags,
				// 	data: {
				// 		id: '2', //修改时传值
				// 		label: this.singleLabel //添加的标签值
				// 	}
				// });
			
			
				this.$sun.toast('添加成功！');
				this.addTag2()
				this.closeTag();
			},
			
			
			// 关闭 ‘添加标签’弹出框
			closeTag() {
				this.$refs.pop.close();
			},
			subTypeFn() {
			
				this.$sun.navGo('/pagesB/index/classifyAll',{type:3})
			},
			//删除标签
			deleteTag(item) {
				console.log(item);
				// 2种删除方式
				// this.tagDeleteList.splice(this.tagDeleteList.indexOf(item), 1);
				this.tagAddList = this.tagAddList.filter(o => {
					return o !== item;
				});
			},
			//添加标签input框回车事件
			addTag2() {
				this.tagAddList.push(this.singleLabel);
				this.form.label = this.tagAddList.join(",")
				this.singleLabel = '';
			},
			// 上传图片返回
			imgLoaded(e) {
				

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}

                  
				this.imgStr = this.img

				this.form.content_img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},
			imgsChange(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);


				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						// file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload.upload(); //图片上传
					});
				} else {
					this.form.content_img = '',
						this.imgStr = []
				}
				// this.niuyunLoop(file,0)

			},
			
			
			
			// 上传图片返回
			imgLoaded1(e) {
				
			console.log(e)
				this.img1 = [];
				for (let i = 0; i < e.length; i++) {
					this.img1.push(e[i].url);
				}
			
			
				this.imgStr1 = this.img1
			    console.log(this.imgStr1,'this.imgStr1')
				this.form.cover_img = this.imgStr1.length === 1 ? this.imgStr1[0].toString() : this.imgStr1
					.join(',');
			},
			imgsChange1(file) {
			
				
			
			
				if (file.length) {
					this.upPicUrl1 = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData1 = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.cover_img = '',
						this.imgStr1 = []
				}
				// this.niuyunLoop(file,0)
			
			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		.bg {

			height: 392.42rpx;
		}

		.buildingInformation {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin-top: -20rpx;
			z-index: 50;
			position: relative;
			background: rgb(255, 255, 255);

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: right;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}
		}

		.personalTags {
			margin: 36rpx 0;

			.tag_container {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				// justify-content: space-between;
				flex-wrap: wrap;
			}

			.zy_tag_add {
				width: 150rpx;
				
				height: 50rpx; //medium：45rpx；small：40rpx；mini：35rpx
				padding: 5rpx 15rpx;
				margin: 5rpx 8rpx;
				border: 2rpx solid rgb(237, 237, 237);
				border-radius: 10rpx;
				text-align: center;
			}
		}
		.release{
			margin: 0 20rpx ;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;
			background: rgb(120, 93, 246);
		}
		.textarea-box {
			margin-top: 24rpx;
			border: 2rpx dashed #1e6ceb;
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
		
			.textarea-color {
				text-align: right;
				color: #999;
			}
		}
		// “添加标签” 弹出框
		.v-pop-cls {
			padding: 46rpx 0 88rpx;
			width: 710rpx;
			height: auto;
			position: relative;
			border-radius: 20rpx;
			background: #fff;
		
			image {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				padding: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		
			text {
				color: #000;
				font-size: 36rpx;
			}
		
			input {
				// text-align: center;
				padding: 0 20rpx;
				width: 608rpx;
				height: 94rpx;
				margin: 62rpx 0;
				border-radius: 20rpx;
				background: #f5f5f5;
			}
		
			.add {
				width: 638rpx;
				height: 88rpx;
				background: #1890ff;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>